<!DOCTYPE html>
<html>
<head>
    
<meta charset="utf-8"> <!--键值对，key=value-->
    
<title>CSS 动画</title>
<link rel="stylesheet" type="text/css" href="anim.css">
</head>
<body>

<h1>CSS 动画</h1>
<h2>图片变形</h2>
    <h3>主要CSS属性</h3>
    <xmp>
        transform-origin: 变形原点
        transform: 变形方法
    </xmp>
    <h3>效果</h3>
<div>
这是一张普通图片

<img class="origin" src="zjc.jpg" width="500" height="500" />
<br/>
下面是各种变形
<div>
<img class="rotate" src="zjc.jpg" width="500" height="500" />
<img class="translate" src="zjc.jpg" width="500" height="500" />
<img class="skew" src="zjc.jpg" width="500" height="500" />
<img class="scale" src="zjc.jpg" width="500" height="500" />
<img class="matrix" src="zjc.jpg" width="500" height="500" />
<img class="translate3D" src="zjc.jpg" width="500" height="500" />
<img class="rotate3D" src="zjc.jpg" width="500" height="500" />
</div> 
</div>

<h2> 过渡效果 </h2>
<h3>CSS 属性</h3>
    <xmp>
        transition-property: 产生过渡效果的属性名
        transition-duration: 过渡时间
        transition-delay: 延迟过渡
        transition-timing: 过渡过程
    </xmp>
    等价于
    <xmp>
        transition: 产生过渡效果的属性名, 过渡时间, 延迟过渡, 过渡过程
    </xmp>

<div>
对图高和宽制造动画，产生变形效果
    <img class="wow" src="zjc.jpg"/>

</div>
<h2> 帧动画 </h2>

<h3> 定义帧动画 </h3>
<xmp>
    @keyframes anim_name {
    0% {css-styles}
    10% {css-styles}
    100% {css-styles}
}

animation: anim_name 5s linear infinite;
</xmp>

<div>
<pre class="poem" id="text">
    学院召开党政负责人会议

    11月22日，学院召开党政负责人会议，
    学院领导及各单位(部门)党政负责人参加会议。

    在听取相关职能部门的汇报后院长李澎林强调，
    学院的内涵式发展要体现在制定具体的制度和措施中。
</pre>
</div>

<h3> 帧动画属性 </h3>
<xmp>animation: anim_name 5s linear infinite; </xmp>
等价于
<xmp>
animation-name: anim_name;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
</xmp>
其他
<xmp>
animation-direction: nomral|alternate;
animation-delay: 5s;
animation-play-state: ;
animation-fill-mode: ;
</xmp>
</body>